<template>
    <div class="wrapper">
    <!-- 本文件所有图片都是占位符 -->
    <header>
      <div class="header-content">
        <div class="logo">
          <img src="@/assets/images/shoplogo.png" alt="商城Logo">
        </div>
        <div class="search-box">
          <i class="fa fa-search"></i>
          <input type="text" placeholder="搜索健康用品">
        </div>
        <i class="fa fa-user-o"></i>
      </div>
    </header>

    <!-- 轮播图 -->
    <div class="banner">
      <img src="@/assets/images/banner1.jpg" alt="健康用品轮播">
    </div>

    <!-- 分类导航 -->
    <nav class="category-nav">
      <ul>
        <li class="active">热销推荐</li>
        <li>新品上市</li>
        <li>折扣专区</li>
        <li>家庭常备</li>
        <li>健康器械</li>
        <li>营养保健</li>
      </ul>
    </nav>

    <!-- 商品列表 -->
    <div class="product-list">
      <div class="product-card" v-for="item in 8" :key="item">
        <div class="product-img">
          <img src="@/assets/images/product1.jpg" alt="商品图片">
        </div>
        <div class="product-info">
          <h3>商品名称</h3>
          <p class="price">¥99.00</p>
          <button class="buy-btn">立即购买</button>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <FooterView>
      
    </FooterView>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import FooterView from '@/components/FooterView.vue';
export default{
  setup(){

  },
  components: {
        FooterView,
    },
    
}
</script>

<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
  width: 100%;
  background-color: #F9F9F9;
  padding-bottom: 15vw;
}

/*********************** 头部 ***********************/
header {
  width: 100%;
  height: 15.7vw;
  background-color: #FFF;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.6vw;
}
.logo img {
  width: 9vw;
  height: 9vw;
}
.search-box {
  flex: 1;
  margin: 0 3vw;
  padding: 1.5vw 2vw;
  background-color: #F2F2F2;
  border-radius: 5vw;
  display: flex;
  align-items: center;
}
.search-box input {
  flex: 1;
  margin-left: 2vw;
  font-size: 3.6vw;
  background: none;
  border: none;
}
.search-box input:focus {
  outline: none;
}
.fa-user-o {
  font-size: 5.6vw;
}

/*********************** 轮播图 ***********************/
.banner {
  margin-top: 15.7vw;
  padding: 3vw;
}
.banner img {
  width: 100%;
  height: 40vw;
  border-radius: 2vw;
}

/*********************** 分类导航 ***********************/
.category-nav {
  padding: 0 3vw 3vw;
  background-color: #FFF;
}
.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #EFEFEF;
}
.category-nav ul li {
  width: 30%;
  padding: 3vw 0;
  text-align: center;
  font-size: 4vw;
  color: #666;
  border-bottom: 2px solid transparent;
}
.category-nav ul li.active {
  color: #127A90;
  border-bottom-color: #127A90;
}

/*********************** 商品列表 ***********************/
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
  padding: 3vw;
  background-color: #FFF;
}
.product-card {
  background-color: #FAFAFA;
  border-radius: 2vw;
  overflow: hidden;
  margin-bottom: 3vw;
}
.product-img {
  width: 100%;
  height: 50vw;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-info {
  padding: 2vw;
  text-align: center;
}
.product-info h3 {
  font-size: 4vw;
  margin: 2vw 0;
}
.price {
  color: #E4393C;
  font-size: 4.5vw;
  margin-bottom: 2vw;
}
.buy-btn {
  width: 90%;
  padding: 2.5vw;
  background-color: #127A90;
  color: #FFF;
  border: none;
  border-radius: 1vw;
  font-size: 4vw;
  margin-bottom: 3vw;
}
.buy-btn:active {
  background-color: #0F6778;
}

/*********************** 底部 ***********************/
.footer {
  padding: 5vw 3vw;
  text-align: center;
  background-color: #F9F9F9;
}
.back-top {
  margin-bottom: 3vw;
  color: #888;
  font-size: 3.6vw;
}
.back-top i {
  margin-right: 1vw;
}
.copyright {
  color: #AAA;
  font-size: 3vw;
}
</style>